<template>
  <div>
    <cus-search>
      <cus-search-item>
        <!-- <cusButton class="mr_10 mb_20" @onClick="getRoleListApi"
          >查询</cusButton
        > -->
        <cusButton class="mr_10 mb_20" type="primary" @onClick="onAdd"
          >新增</cusButton
        >
      </cus-search-item>
    </cus-search>

    <cus-card title="角色列表" class="mt_20">
      <cusTable
        border
        :loading="form.loading"
        :columns="columns"
        :data="data"
        :bottomClass="['cus-page']"
        :size="vuex_config.tableSize"
      >
        <template slot-scope="{ row, index }" slot="gmtCreate">
          {{ row.gmtCreate | formatTime("yyyy-MM-dd hh:mm:ss") }}
        </template>
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              :disabled="row.isDefault == 1"
              :style="{ color: row.isDefault == 1 ? '#5f6368' : '#33a5fe' }"
              @onClick="onEdit(row)"
            >
              修改
            </cus-button>
            <cus-button
              type="text"
              size="small"
              :disabled="row.isDefault == 1"
              :style="{ color: row.isDefault == 1 ? '#5f6368' : '#FF4746' }"
              @onClick="onDelete(row)"
            >
              删除
            </cus-button>
          </div>
        </template>
      </cusTable>
      <div style="width: 100%;display: flex;justify-content: flex-end">
        <cus-page
          :data="pages"
          class="mt_10"
          @pageChange="getRoleListApi"
        ></cus-page>
      </div>
    </cus-card>
    <roleModal ref="roleModal"></roleModal>
  </div>
</template>

<script>
import { getRoleList, deleteRole } from "@/api/business/system";
import roleModal from "./components/roleModal";

export default {
  components: { roleModal },
  name: "roleManage",
  data() {
    return {
      form: {
        loading: false
      },
      pages: {
        page: 1,
        pageSize: 20,
        pageTotal: 0
      },
      data: [],
      columns: [
        {
          title: "角色名称",
          minWidth: 200,
          key: "name",
          align: "center"
        },
        {
          title: "描述",
          minWidth: 250,
          key: "descr",
          align: "center"
        },
        {
          title: "创建时间",
          minWidth: 200,
          slot: "gmtCreate",
          align: "center"
        },
        {
          title: "更新时间",
          minWidth: 200,
          slot: "gmtCreate",
          align: "center"
        },
        {
          title: "操作",
          width: 170,
          fixed: "right",
          slot: "operation",
          align: "center"
        }
      ]
    };
  },
  mounted() {
    this.onInit();
  },
  methods: {
    onInit() {
      this.form.loading = true;
      this.getRoleListApi().then(() => (this.form.loading = false));
    },
    onAdd() {
      this.$refs["roleModal"].form.id = "";
      this.$refs["roleModal"].show();
    },
    onEdit(row) {
      this.$refs["roleModal"].form.id = row.id;
      this.$refs["roleModal"].show();
    },
    onDelete(row) {
      this.$cu.dialog({ params: row }).then(({ id }) => {
        this.$cu.showLoading();
        this.deleteRoleApi(id);
      });
    },
    getRoleListApi() {
      return new Promise(resolve => {
        getRoleList({
          currentPage: this.pages.page,
          pageSize: this.pages.pageSize
        }).then(res => {
          if (res.code === 1) {
            this.pages.pageTotal = res.data.total;
            this.data = res.data.list;
            resolve();
          }
        });
      });
    },
    // 删除按钮
    deleteRoleApi(id) {
      return new Promise(resolve => {
        deleteRole({ id })
          .then(res => {
            if (res.code === 1) {
              this.$cu.hideLoading();
              this.$Message.success("删除成功");
              this.getRoleListApi();
              resolve();
            } else this.$cu.hideLoading(1.5);
          })
          .catch(() => this.$cu.hideLoading(1.5));
      });
    }
  }
};
</script>

<style scoped></style>
